$(function(){
	class  ShopCar{
		constructor(){
			
		}
		/*加载数据*/
		load(){
			var that=this;
			$.ajax({
				 type: "GET",
			    url: "../dist/script/liebiao.json",//获取本地json文件
			    data: "json"
				
			})
			
			.then(function(res){//传入数据
				that.res=res
				that.loading()
				that.init()
			},function(){
				console.log("加载失败")
			})
		}
		loading(){//拼接数据
			var html="";
			for(var i=0;i<this.res.length;i++){
				html += `
						<li>
							<div class="li-baby">
								<div class="good-pic">
									<img src="${this.res[i].img}" alt="" />
								</div>
							</div>
							<div class="good-info">
								<div class="goods-price-offer"> 
									<em class="sale-price" >
										<b>￥</b>
										145.00
									</em>
									
								</div>
								<div class="goods-name">
									<a href="" >荣事达（Royalstar）电饭煲RXA-309C 10小时预约功能</a> 
								</div>
								<div class="goods-jingle">
									<a href="">优质黑晶内胆 高效聚能</a>
								</div>
								<div class="store"> 
									<a href="">荣电商城</a>
								</div>
								<div class="shopping-box" >
						           
						            <div class="sc">
										<div class="sc_btn" id="${this.res[i].id}">加入购物车</div>
									</div>
						            <div class="favorite-btn" >
						              	<a href="" >
						              		<i class="shop_common"></i>
						              		收藏
						              	</a>
						            </div>
						            <div class="im-btn">
						                <a href=""><i ></i></a>
						            </div>
						        </div>
							</div>
						</li>`
			}
			$(".goods").html(html);//加入ul里
		}
		init(){
			//console.log($(".re"))
			var that=this;
			/*加入购物车*/
			$(".sc_btn").click(function(){
					
					that.storage(this.id);
					that.showCar();
			})
			/*划入加载li*/
			var flag=false
			$(".my_mall2").on("mouseenter",function(){
					if(flag==false){
						that.showCar();
						flag=true
					}
				
			})
			$(".my_mall2").on("mouseleave",function(){
					$(this).children(".good-list").hide()
				
			})
			
			/*删除li和cookie数据,动态获取给其父元素绑定事件*/
			$(".good-list").on("click",".re",function(){
					var id=$(".re").attr("data-id");//添加data-id以便删除找id
					that.remove($(this),id)//第一个参数是当前对象
					
					
			})
			
			
		}
		storage(id){
				
					
				if(!$.cookie("goods")){
					//不存在;
					$.cookie("goods",'[{"id":'+id+',"num":1}]',{
						path:"/"
					});
				}else{
					//存在;
					//变成数组 => 操作cookie;
					var cookie = $.cookie("goods");
					//console.log(cookie)
					var  cookieArr = JSON.parse(cookie);
					var same = false;
					for(var i = 0 ; i < cookieArr.length ; i++){
						if(cookieArr[i].id == id){ //存在当前的商品;
							cookieArr[i].num++;
							same = true;
							break;
						}
					}
					if(same == false){
						var obj = {
							id:id,
							num:1
						};
						cookieArr.push(obj);
						
					}
					//console.log(cookieArr)
					//变成字符串 => 存进cookie;
					cookie = JSON.stringify(cookieArr);
					$.cookie("goods",cookie,{
						path:"/"
					});
					
				}
		}
		
		showCar(){
			/*有东西就构建 添加*/
			if($.cookie("goods")){
				var aCookie = JSON.parse($.cookie("goods"));
				
				var html = "";
				for(var i = 0 ; i < aCookie.length ; i++){
					
					html += `
							<li>
								
								<img   src="${this.res[aCookie[i].id].img}"> 
								<span>商品数量:${aCookie[i].num}</span>
								<div class="re" data-id=${aCookie[i].id}>删除</div>
							</li>
							
						`
				}
				
				$(".good-list").html(html)
			}		
		}
		remove($this,id){
			
			//我的cookie是一条,所以转化用数组方法删除
			var rcookie=JSON.parse($.cookie("goods"));
			for(var i=0;i<rcookie.length;i++){
				//console.log(this)
				if(rcookie[i].id==id){
					rcookie.splice(i,1);
				}
				/*转化数据类型再次添加覆盖以前的cookie数据,否则渲染再次回来*/
				var qcookie=JSON.stringify(rcookie);
				$.cookie("goods",qcookie,{
						path:"/"
					});
				
			}
			/*删除这个样式li*/
			$this.parent().remove()
			
		}
		
		
	}				
	var shopcar = new ShopCar();
	shopcar.load();
})
